<template>
  <el-collapse>
    <el-collapse-item title="布局">
      <template #title>布局 <span class="prop-collapse-subtitle">display</span></template>
      <c-layout v-model="modelValue" />
    </el-collapse-item>
    <el-collapse-item title="定位">
      <template #title>定位 <span class="prop-collapse-subtitle">position</span></template>
      <c-position v-model="modelValue" />
    </el-collapse-item>
    <el-collapse-item title="字体">
      <template #title>字体 <span class="prop-collapse-subtitle">font</span></template>
      <c-font
        v-model="modelValue"
        :ele-def="currentEleData"
        :current-item-el-code="currentItemElCode"
      />
    </el-collapse-item>
    <el-collapse-item v-if="currentEleData?._type === 'text' || currentEleData?._type === 'icon'">
      <template #title>文字 <span class="prop-collapse-subtitle">text</span></template>
      <c-txt
        v-model="modelValue"
        :ele-def="currentEleData"
        :current-item-el-code="currentItemElCode"
      />
    </el-collapse-item>
    <el-collapse-item title="背景">
      <template #title>背景 <span class="prop-collapse-subtitle">background</span></template>
      <c-bg v-model="modelValue" />
    </el-collapse-item>
    <el-collapse-item title="边框">
      <template #title>边框 <span class="prop-collapse-subtitle">border</span></template>
      <c-border v-model="modelValue" />
    </el-collapse-item>
    <el-collapse-item title="阴影">
      <template #title>阴影 <span class="prop-collapse-subtitle">shadow</span></template>
      <c-shadow v-model="modelValue" />
    </el-collapse-item>
    <el-collapse-item title="变形">
      <template #title>变形 <span class="prop-collapse-subtitle">transform</span></template>
      <c-transform v-model="modelValue" />
    </el-collapse-item>
    <el-collapse-item title="过渡">
      <template #title>过渡 <span class="prop-collapse-subtitle">transition</span></template>
      <c-transition v-model="modelValue" />
    </el-collapse-item>
    <el-collapse-item title="图片">
      <template #title>图片 <span class="prop-collapse-subtitle">image</span></template>
      <c-img v-model="modelValue" :ele-def="currentEleData" />
    </el-collapse-item>
    <el-collapse-item title="视频" v-if="currentEleData?._type === 'video'">
      <template #title>视频 <span class="prop-collapse-subtitle">video</span></template>
      <c-video v-model="modelValue" :ele-def="currentEleData" />
    </el-collapse-item>
    <el-collapse-item title="响应式" v-if="currentEleData">
      <template #title>栅格 / 响应式 <span class="prop-collapse-subtitle">grid / resp</span></template>
      <c-resp
        v-model="currentEleData._resp"
        :ele-def="currentEleData"
        :current-item-el-code="currentItemElCode"
      />
    </el-collapse-item>
    <el-collapse-item title="粘性" v-if="currentEleData">
      <template #title>粘性 <span class="prop-collapse-subtitle">sticky</span></template>
      <c-sticky
        v-model="currentEleData._sticky"
        :ele-def="currentEleData"
        :current-item-el-code="currentItemElCode"
      />
    </el-collapse-item>
    <el-collapse-item title="动画" v-if="currentEleData">
      <template #title>动画 <span class="prop-collapse-subtitle">animate</span></template>
      <c-anime
        v-model="currentEleData._anime"
        :ele-def="currentEleData"
        :node="currentNode"
        :current-item-el-code="currentItemElCode"
      />
    </el-collapse-item>
    <el-collapse-item title="其他样式">
      <template #title>其他样式 <span class="prop-collapse-subtitle">cursor / other</span></template>
      <c-other v-model="modelValue"></c-other>
    </el-collapse-item>
    <!--<el-collapse-item title="主题" v-if="supportTheme">
        <template #title>主题 <span class="prop-collapse-subtitle">theme</span></template>
        <c-theme :ele-def="currentEleData"></c-theme>
    </el-collapse-item>-->
  </el-collapse>
</template>

<script setup>
import cLayout from './ele/common-ele/layout.vue';
import cPosition from './ele/common-ele/position.vue';
import cFont from './ele/common-ele/font.vue';
import cTxt from './ele/common-ele/txt.vue';
import cBorder from './ele/common-ele/border.vue';
import cBg from './ele/common-ele/bg.vue';
// import cMargin from './ele/common-ele/margin';
import cImg from './ele/common-ele/img.vue';
import cVideo from './ele/common-ele/video.vue';
import cShadow from './ele/common-ele/shadow.vue';
import cTransform from './ele/common-ele/transform.vue';
import cTransition from './ele/common-ele/transition.vue';
import cOther from './ele/common-ele/other.vue';
import cResp from './ele/common-ele/resp.vue';
import cAnime from './ele/common-ele/anime.vue'
import cSticky from './ele/common-ele/sticky.vue'
import {onMounted, watch} from "vue";

defineOptions({
  name: "BuilderPropStyle"
})

const modelValue = defineModel()

const props = defineProps({
  // style: Object,
  currentEleData: Object,
  currentItemElCode: String,
  currentNode: Object
})
</script>
